<template>
    <div id="surver">
        <div id="gis">gis</div>
        <div class="gistools">
            <el-dropdown @command="handleCommand1">
                <span class="el-dropdown-link">
                    <i class="el-icon-location"></i>
                    {{tools1_str}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a1">黄金糕1</el-dropdown-item>
                    <el-dropdown-item command="b1">狮子头1</el-dropdown-item>
                    <el-dropdown-item command="c1">螺蛳粉1</el-dropdown-item>
                    <el-dropdown-item command="d1">双皮奶1</el-dropdown-item>
                    <el-dropdown-item command="e1">蚵仔煎1</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown @command="handleCommand2">
                <span class="el-dropdown-link">
                    <i class="el-icon-location"></i>
                    {{tools2_str}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a2">黄金糕2</el-dropdown-item>
                    <el-dropdown-item command="b2">狮子头2</el-dropdown-item>
                    <el-dropdown-item command="c2">螺蛳粉2</el-dropdown-item>
                    <el-dropdown-item command="d2">双皮奶2</el-dropdown-item>
                    <el-dropdown-item command="e2">蚵仔煎2</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown @command="handleCommand3">
                <span class="el-dropdown-link">
                    <i class="el-icon-location"></i>
                    {{tools3_str}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a3">黄金糕3</el-dropdown-item>
                    <el-dropdown-item command="b3">狮子头3</el-dropdown-item>
                    <el-dropdown-item command="c3">螺蛳粉3</el-dropdown-item>
                    <el-dropdown-item command="d3">双皮奶3</el-dropdown-item>
                    <el-dropdown-item command="e3" >蚵仔煎3</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="aside-table">
           <div class="toggleBar">
              <template v-if="tableShow">
                <i class="el-icon-arrow-left" @click="closeTable"></i>
              </template>
              <template v-else>
                <i class="el-icon-arrow-right" @click="openTable"></i>
              </template>
            </div>
          <div class="inner_" v-if="tableShow">
              <div class="row">
                <div class="top-tabItem">选择图层</div>
                <div class="tabs">
                    <div class="tab-item" @click="activeThis(index)" :class="{active:index==actived}" v-for="(item,index) in tabs" :key="index">{{item.name}}</div>
                </div>
            </div>
            <div class="row">
                <div class="select-item">
                    <span>选择对象:</span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="inner">
                    <div class="col">
                        <div class="select-item">
                            <span>所属区域:</span>
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="select-item">
                            <span>测点名称:</span>
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="col">
                        <el-button type="primary">搜索</el-button>
                    </div>
                </div>
                <template v-if="actived==0">
                     <div class="timer-select">
                        <el-date-picker
                                v-model="date_"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                        <el-radio v-model="radio_" label="1">04:00-02:00</el-radio>
                        <el-radio v-model="radio_" label="2">02:00-04:00</el-radio>
                    </div>
                    <div class="content">
                            <div class="h_tabs">
                                <div class="tab-item" @click="showThisContent_flow(index)" :class="{active:index==flow.actived_contentTab}" v-for="(item,index) in flow.content_tabs" :key="index">{{item.name}}</div>
                            </div>
                            <template  v-if='flow.actived_contentTab==0'>
                                <div class="warning">
                                    <div class="head">
                                        <div class="head-item bg">地点</div>
                                        <div class="head-item bg">编号</div>
                                        <div class="head-item bg">时间</div>
                                        <div class="head-item">流量值</div>
                                        <div class="head-item">预警级别</div>
                                        <div class="head-item">解除预警</div>
                                    </div>
                                    <div class="inner-list">
                                        <div class="list-item" v-for="(item,index) in flow.contentList" :key="index">
                                            <div class="item bg" :title="item.address"> <span> {{item.address}}</span></div>
                                            <div class="item bg" :title="item.number"><span>{{item.number}}</span></div>
                                            <div class="item bg" :title="item.time"><span>{{item.time}}</span></div>
                                            <div class="item"><span>{{item.flowNum}}</span></div>
                                            <div class="item" :class="{warn:item.status==true}">
                                                <i class="el-icon-circle-close"></i>
                                                <span>警告</span>
                                            </div>
                                            <div class="item">
                                                <el-radio v-model="item.radio_status" label="1">是</el-radio>
                                                <el-radio  class="noMargin" v-model="item.radio_status" label="2">否</el-radio>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template  v-else>
                                <div class="flowMonitor">
                                    flowMonitor
                                </div>
                            </template>
                        </div>
                </template>
                <template v-if="actived==1">
                     <div class="timer-select" v-show='waterPress.actived_contentTab==1'>
                        <el-date-picker
                                v-model="date_"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                        <el-radio v-model="radio_" label="1">04:00-02:00</el-radio>
                        <el-radio v-model="radio_" label="2">02:00-04:00</el-radio>
                    </div>
                    <div class="content" :class="{more:waterPress.actived_contentTab==0}">
                            <div class="h_tabs">
                                <div class="tab-item" @click="showThisContent_waterPress(index)" :class="{active:index==waterPress.actived_contentTab}" v-for="(item,index) in waterPress.content_tabs" :key="index">{{item.name}}</div>
                            </div>
                            <template  v-if='waterPress.actived_contentTab==0'>
                                <div class="warning">
                                    <div class="head">
                                        <div class="head-item bg">紧急状态</div>
                                        <div class="head-item bg">预警时间</div>
                                        <div class="head-item">描述</div>
                                        <div class="head-item">监测点名称</div>
                                        <div class="head-item">详情</div>
                                    </div>
                                    <div class="inner-list">
                                        <div class="list-item" v-for="(item,index) in waterPress.contentList" :key="index">
                                            <div class="item" :class="{warn:item.status==true}" >
                                                <i class="el-icon-circle-close"></i>
                                                <span>告警</span>
                                            </div>
                                            <div class="item" :title="item.time"><span>{{item.time}}</span></div>
                                            <div class="item bg" :title="item.desc"><span>{{item.desc}}</span></div>
                                            <div class="item bg" :title="item.name"><span>{{item.name}}</span></div>
                                            <div class="item" >
                                                <span class='detail' @click="showDetail_wordPress(index)">详情</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template  v-else>
                                <div class="warning">
                                     <div class="head">
                                        <div class="head-item bg">地点</div>
                                        <div class="head-item bg">编号</div>
                                        <div class="head-item bg">时间</div>
                                        <div class="head-item">流量值</div>
                                        <div class="head-item">预警级别</div>
                                        <div class="head-item">解除预警</div>
                                    </div>
                                    <div class="inner-list">
                                        <div class="list-item" v-for="(item,index) in flow.contentList" :key="index">
                                            <div class="item bg" :title="item.address"><span>{{item.address}}</span></div>
                                            <div class="item bg" :title="item.number"><span>{{item.number}}</span></div>
                                            <div class="item bg" :title="item.time"><span>{{item.time}}</span></div>
                                            <div class="item"><span>{{item.flowNum}}</span></div>
                                            <div class="item" :class="{warn:item.status==true}">
                                                <i class="el-icon-circle-close"></i>
                                                <span>警告</span>
                                            </div>
                                            <div class="item">
                                                <el-radio v-model="item.radio_status" label="1">是</el-radio>
                                                <el-radio  class="noMargin" v-model="item.radio_status" label="2">否</el-radio>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                </template>
                <template v-if="actived==2">
                     <div class="timer-select" v-show='waterQuality.actived_contentTab==1'>
                        <el-date-picker
                                v-model="date_"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                        <el-radio v-model="radio_" label="1">04:00-02:00</el-radio>
                        <el-radio v-model="radio_" label="2">02:00-04:00</el-radio>
                    </div>
                    <div class="content" :class="{more:waterQuality.actived_contentTab==0}">
                            <div class="h_tabs">
                                <div class="tab-item" @click="showThisContent_waterQuality(index)" :class="{active:index==waterQuality.actived_contentTab}" v-for="(item,index) in waterQuality.content_tabs" :key="index">{{item.name}}</div>
                            </div>
                            <template  v-if='waterQuality.actived_contentTab==0'>
                                <div class="warning">
                                    <div class="head">
                                        <div class="head-item">紧急状态</div>
                                        <div class="head-item">预警时间</div>
                                        <div class="head-item bg">描述</div>
                                        <div class="head-item">监测点名称</div>
                                        <div class="head-item">详情</div>
                                    </div>
                                    <div class="inner-list">
                                        <div class="list-item" v-for="(item,index) in waterQuality.contentList" :key="index">
                                            <div class="item" :class="{warn:item.status==true}" >
                                                <i class="el-icon-circle-close"></i>
                                                <span>告警</span>
                                            </div>
                                            <div class="item" :title="item.time"><span>{{item.time}}</span></div>
                                            <div class="item bg" :title="item.desc"><span>{{item.desc}}</span></div>
                                            <div class="item bg" :title="item.name"><span>{{item.name}}</span></div>
                                            <div class="item" >
                                                <span class='detail' @click="showDetail_waterQuality(index)">详情</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template  v-else>
                                <div class="warning">
                                     <div class="head">
                                        <div class="head-item bg">地点</div>
                                        <div class="head-item bg">编号</div>
                                        <div class="head-item bg">时间</div>
                                        <div class="head-item">流量值</div>
                                        <div class="head-item">预警级别</div>
                                        <div class="head-item">解除预警</div>
                                    </div>
                                    <div class="inner-list">
                                        <div class="list-item" v-for="(item,index) in flow.contentList" :key="index">
                                            <div class="item bg" :title="item.address"><span>{{item.address}}</span></div>
                                            <div class="item bg" :title="item.number"><span>{{item.number}}</span></div>
                                            <div class="item bg" :title="item.time"><span>{{item.time}}</span></div>
                                            <div class="item"><span>{{item.flowNum}}</span></div>
                                            <div class="item" :class="{warn:item.status==true}">
                                                <i class="el-icon-circle-close"></i>
                                                <span>警告</span>
                                            </div>
                                            <div class="item">
                                                <el-radio v-model="item.radio_status" label="1">是</el-radio>
                                                <el-radio  class="noMargin" v-model="item.radio_status" label="2">否</el-radio>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                </template>
               <template v-if="actived==3">
                    <div class="content" :class="{more:true}">
                            <div class="warning" :class="{more: true}">
                                <div class="head" :class="{more: true}">
                                    <div class="head-item">水龄时长</div>
                                    <div class="head-item bg bgger">描述</div>
                                    <div class="head-item bg bgger">地点</div>
                                    <div class="head-item">是否处理</div>
                                </div>
                                <div class="inner-list">
                                    <div class="list-item" v-for="(item,index) in waterAge.contentList" :key="index">
                                        <div class="item" :title="item.age"><span>{{item.age}}</span></div>
                                        <div class="item bg bgger" :title="item.desc"><span>{{item.desc}}</span></div>
                                        <div class="item bg bgger" :title="item.name"><span>{{item.name}}</span></div>
                                        <div class="item" >
                                            <span class='detail' @click="showDetail_waterAge(index)">详情</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </template>
                <template v-if="actived==4">
                    <div class="content" :class="{more:true}">
                            <div class="warning" :class="{more: true}">
                                <div class="head" :class="{more: true}">
                                    <div class="head-item bg">所属管线</div>
                                    <div class="head-item">爆管可能程度</div>
                                    <div class="head-item">爆管次数</div>
                                    <div class="head-item">模拟结果</div>
                                    <div class="head-item">爆管历史信息</div>
                                </div>
                                <div class="inner-list">
                                    <div class="list-item" v-for="(item,index) in DetonatingRisk.contentList" :key="index">
                                        <div class="item bg" :title="item.name"><span>{{item.name}}</span></div>
                                        <div class="item" :title="item.level"><span>{{item.level}}</span></div>
                                        <div class="item">{{item.level}}</div>
                                        <div class="item" >
                                            <span class='detail' @click="showDetail_simulate(index)">详情</span>
                                        </div>
                                        <div class="item" >
                                            <span class='detail' @click="showDetail_history(index)">详情</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </template>
               <div class="pagenation">
                   <pagenation :noSmall='paginate.ifSmall' :totalPage="paginate.totalPage_" @thisPage="gotoThisPage"></pagenation>
               </div>
            </div>
          </div>
            
        </div>
        <detail-model  @hiddenSelf="hiddenDetailModel"  :showViewModel="showDetail" :title="'爆管历史详情'">
            <template v-if="actived==1">
                <div class="waterPress">
                    waterPress
                </div>
            </template>
            <template v-if="actived==2">
                <div class="waterQuality">
                    waterQuality
                </div>
            </template>
            <template v-if="actived==3">
                <div class="waterAge">
                    waterAge
                </div>
            </template>
            <template v-if="actived==4">
                <div class="DetonatingRisk">
                  <div class="tabs">
                      <span @click="showThisTab(index)" :class="{selected:pipeBoom_selected==index}" v-for="(item,index) in pipeBoomDescTab" :key="index">{{item.name}}</span>
                  </div>
                  <template v-if="pipeBoom_selected==1">
                    <div class="table">
                      <div class="mainTitle">
                        <span>检修反馈单</span>
                      </div>
                      <div class="subTitle">
                        <div class="col"><span>检修单号:</span><span>NXST-0010</span></div>
                        <div class="col"><span>反馈时间:</span><span>2018-06-10 08:25</span></div>
                      </div>
                      <div class="content">
                        <table>
                          <tr>
                            <td class="cell-title"><span>检修地点</span></td>
                            <td><span>原州区北京路惠民路口</span></td>
                            <td class="cell-title"><span>最近处理时间</span></td>
                            <td><span>2018-01-01</span></td>
                          </tr>
                          <tr>
                            <td class="cell-title"><span>紧急程度</span></td>
                            <td><span>紧急</span></td>
                            <td class="cell-title"><span>检修类型</span></td>
                            <td><span>爆管抢修</span></td>
                          </tr>
                          <tr>
                            <td class="cell-title"><span>处理人</span></td>
                            <td><span>王龙</span></td>
                            <td class="cell-title"><span>处理时间</span></td>
                            <td><span>5小时</span></td>
                          </tr>
                          <tr>
                            <td  rowspan="3" class="cell-title"><span>检修报告</span></td>
                            <td colspan="3"  class="leftalign"><span>原因分析:</span> <span>内容</span> </td>
                          </tr>
                          <tr>
                            <td colspan="3" class="leftalign"><span>处理结果:</span> <span>内容</span> </td>
                          </tr>
                          <tr>
                            <td colspan="3" class="leftalign"><span>相关建议:</span> <span>内容</span> </td>
                          </tr>
                          <tr>
                            <td class="cell-title" rowspan="4" ><span>材料清单</span></td>
                            <td class="v-title"><span>材料名称</span></td>
                            <td class="v-title"><span>单位</span></td>
                            <td class="v-title"><span>数量</span></td>
                          </tr>
                          <tr>
                            <td><span>DN200FE管</span></td>
                            <td><span>米</span></td>
                            <td><span>20</span></td>
                          </tr>
                          <tr>
                            <td><span>哈夫节</span></td>
                            <td><span>套</span></td>
                            <td><span>2</span></td>
                          </tr>
                          <tr>
                            <td><span>DN200FE弯头</span></td>
                            <td><span>个</span></td>
                            <td><span>2</span></td>
                          </tr>
                          <tr>
                            <td class="cell-title"><span>检修评价</span></td>
                            <td colspan="3"><span>此次爆管影响较大，请在六个小时内完成抢修恢复供水</span></td>
                          </tr>
                          <tr>
                            <td  class="noBorder" colspan="2"><span>检修部门:</span></td>
                            <td  class="noBorder" colspan="2"><span>验收部门:</span></td>
                          </tr>
                          <tr>
                            <td  class="noBorder" colspan="2"><span>签字:</span></td>
                            <td  class="noBorder" colspan="2"><span>签字:</span></td>
                          </tr>
                        </table>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="table">
                      <table>
                        <tr>
                          <td class="weight" > <span>漏水量</span> </td>
                          <td> <span>漏水量</span> </td>
                          <td class="weight"> <span>上报方式</span> </td>
                          <td> <span>漏水量</span> </td>
                          <td class="weight"> <span>抢修完成时间</span> </td>
                          <td> <span>漏水量</span> </td>
                        </tr>
                        <tr>
                          <td class="weight" > <span>抢修部门</span> </td>
                          <td> <span>漏水量</span> </td>
                          <td class="weight"> <span>抢修人员</span> </td>
                          <td> <span>漏水量</span> </td>
                          <td class="weight"> <span>恢复方式</span> </td>
                          <td> <span>漏水量</span> </td>
                        </tr>
                        <tr>
                          <td class="h-img weight" > <span>抢修前照片</span> </td>
                          <td class="h-img" colspan="5"> <span>照片</span> </td>
                        </tr>
                        <tr>
                          <td class="h-img weight" > <span>抢修后照片</span> </td>
                          <td class="h-img" colspan="5"> <span>照片</span> </td>
                        </tr>
                      </table>
                    </div>
                  </template>
                </div>
            </template>
        </detail-model>
        <detail-model  @hiddenSelf="hiddenSimulateModel"  :showViewModel="showSimulate" :title="'爆管风险详情分析'">
          <div class="simulate">
            <table>
              <tr>
                <td class="weight"> <span>风险类型</span> </td>
                <td class="weight"> <span>风险权重</span> </td>
                <td class="weight"> <span>管线情况</span> </td>
                <td class="weight"> <span>风险数</span> </td>
                <td class="weight sm"> <span></span></td>
              </tr>
              <tr>
                <td class="weight"> <span>管材</span> </td>
                <td> <span>37%</span> </td>
                <td> <span>DN500水泥管</span> </td>
                <td> <span>0.7</span> </td>
                <td rowspan="5"> <span>爆管系数</span> <span>0.65</span></td>
              </tr>
              <tr>
                <td class="weight"> <span>管龄</span> </td>
                <td> <span>24%</span> </td>
                <td> <span>18年</span> </td>
                <td> <span>0.7</span> </td>
              </tr>
              <tr>
                <td class="weight"> <span>接口类型</span> </td>
                <td> <span>15%</span> </td>
                <td> <span>承插连接</span> </td>
                <td> <span>0.7</span> </td>
              </tr>
              <tr>
                <td class="weight"> <span>管道埋深</span> </td>
                <td> <span>37%</span> </td>
                <td> <span>1.2米</span> </td>
                <td> <span>0.7</span> </td>
              </tr>
               <tr>
                <td class="weight"> <span>爆管历史</span> </td>
                <td> <span>37%</span> </td>
                <td> <span>2次</span> </td>
                <td> <span>0.7</span> </td>
              </tr>
            </table>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </detail-model>
        <detail-model  @hiddenSelf="hiddenHistoryModel"  :showViewModel="showHistory" :title="'爆管风险详情分析'">
          <div class="showHistory">
              <table>
                <tr>
                  <td  class="weight" > <span>爆管历史发生地点</span> </td>
                  <td> <span>临江大道</span> </td>
                  <td  class="minWidth"> <span>备注</span> </td>
                </tr>
                <tr>
                  <td  class="weight" > <span>爆管发生时间</span> </td>
                  <td> <span>2017-12-12 11:54</span> </td>
                  <td class="minWidth"> <span>备注</span> </td>
                </tr>
                <tr>
                  <td  class="weight" > <span>涌水量</span> </td>
                  <td> <span>12344m³</span> </td>
                  <td class="minWidth"> <span>备注</span> </td>
                </tr>
                <tr>
                  <td  class="weight" > <span>抢修前照片</span> </td>
                  <td class="v-img" > <span>照片</span> </td>
                  <td class="minWidth"> <span>备注</span> </td>
                </tr>
                <tr>
                  <td  class="weight" > <span>抢修后照片</span> </td>
                  <td class="v-img"> <span>照片</span> </td>
                  <td class="minWidth"> <span>备注</span> </td>
                </tr>
                <tr>
                  <td  class="weight" > <span>修复完成时间</span> </td>
                  <td> <span>2018-07-08</span> </td>
                  <td class="minWidth"> <span>备注</span> </td>
                </tr>
                <tr>
                  <td  class="weight" > <span>维修人员</span> </td>
                  <td> <span>王强</span> <span>胡勇</span> </td>
                  <td class="minWidth"> <span>备注</span> </td>
                </tr>
                <tr>
                  <td  class="weight" > <span>恢复方式</span> </td>
                  <td> <span>机器人法进行插入式换管</span> </td>
                  <td class="minWidth"> <span>备注</span> </td>
                </tr>
              </table>
              <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </detail-model>
    </div>
</template>
<script>
import pagenation from "@/common/components/pagination";
import detailModel from "@/common/components/Poupe/view";
export default {
  components: {
    pagenation,
    detailModel
  },
  data() {
    return {
      tools1_str: "交通图",
      tools2_str: "工具",
      tools3_str: "全屏",
      tableShow: true,
      showDetail: false, // 显示gis地图的详情弹窗
      showSimulate: false, // 爆管模拟 弹窗
      showHistory: false, // 历史详情 弹窗
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      date_: "",
      radio_: "1",
      tabs: [
        { name: "流量监测" },
        { name: "水压监测" },
        { name: "水质监测" },
        { name: "水龄在线模拟" },
        { name: "爆管风险分析" }
      ],
      actived: 0, //侧边栏 tabs
      flow: {
        content_tabs: [{ name: "警告" }, { name: "流量监测数值" }],
        actived_contentTab: 0, //内容区 tabs
        contentList: [
          {
            address: "临河大道",
            number: "NXST-0001",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true,
            radio_status: "1"
          },
          {
            address: "临河大道FGHFGGUY",
            number: "NXST-0001",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true,
            radio_status: "2"
          }
        ]
      },
      waterPress: {
        content_tabs: [{ name: "警告" }, { name: "压力监测数值" }],
        actived_contentTab: 0, //内容区 tabs
        contentList: [
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          },
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          }
        ]
      },
      waterQuality: {
        content_tabs: [{ name: "警告" }, { name: "水质监测数值" }],
        actived_contentTab: 0, //内容区 tabs
        contentList: [
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          },
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          }
        ]
      },
      waterAge: {
        contentList: [
          {
            age: "12h",
            desc: "水龄时长超过24h",
            name: "临河大道"
          },
          {
            age: "12h",
            desc: "水龄时长超过24h",
            name: "临河大道"
          }
        ]
      },
      DetonatingRisk: {
        contentList: [
          {
            level: "0.65",
            name: "临河大道"
          },
          {
            level: "0.82",
            name: "临河大道"
          }
        ]
      },
      paginate: {
        //分页器
        ifSmall: true,
        totalPage_: 12
      },
      pipeBoomDescTab: [{ name: "基本信息" }, { name: "工单详情" }],
      pipeBoom_selected: 0
    };
  },
  methods: {
    handleCommand1(command) {
      let temp_str = command;
      let that = this;
      switch (temp_str) {
        case "a1":
          that.tools1_str = "黄金糕1";
          break;
        case "b1":
          that.tools1_str = "狮子头1";
          break;
        case "c1":
          that.tools1_str = "螺蛳粉1";
          break;
        case "d1":
          that.tools1_str = "双皮奶1";
          break;
        case "e1":
          that.tools1_str = "蚵仔煎1";
      }
    },
    handleCommand2(command) {
      let temp_str = command;
      let that = this;
      switch (temp_str) {
        case "a2":
          that.tools2_str = "黄金糕2";
          break;
        case "b2":
          that.tools2_str = "狮子头2";
          break;
        case "c2":
          that.tools2_str = "螺蛳粉2";
          break;
        case "d2":
          that.tools2_str = "双皮奶2";
          break;
        case "e2":
          that.tools2_str = "蚵仔煎2";
      }
    },
    handleCommand3(command) {
      let temp_str = command;
      let that = this;
      switch (temp_str) {
        case "a3":
          that.tools3_str = "黄金糕3";
          break;
        case "b3":
          that.tools3_str = "狮子头3";
          break;
        case "c3":
          that.tools3_str = "螺蛳粉3";
          break;
        case "d3":
          that.tools3_str = "双皮奶3";
          break;
        case "e3":
          that.tools3_str = "蚵仔煎3";
      }
    },
    closeTable(){
      this.tableShow = false;
    },
    openTable(){
      this.tableShow = true;
    },
    activeThis(index) {
      this.actived = index;
    },
    showThisContent_flow(index) {
      this.flow.actived_contentTab = index;
    },
    showThisContent_waterPress(index) {
      this.waterPress.actived_contentTab = index;
    },
    showThisContent_waterQuality(index) {
      this.waterQuality.actived_contentTab = index;
    },
    hiddenDetailModel() {
      this.showDetail = false;
    },
    saveInputs(flag) {
      this.showDetail = flag;
    },
    showDetail_flow(index) {
      this.showDetail = true;
    },
    showDetail_wordPress(index) {
      this.showDetail = true;
    },
    showDetail_waterQuality(index) {
      this.showDetail = true;
    },
    showDetail_waterAge(index) {
      this.showDetail = true;
    },
    showDetail_DetonatingRisk(index) {
      this.showDetail = true;
    },
    gotoThisPage(index) {
      console.log(index);
    },
    showThisTab(index) {
      this.pipeBoom_selected = index;
    },
    showDetail_simulate(index) {
      this.showSimulate = true;
    },
    hiddenSimulateModel(flag) {
      this.showSimulate = flag;
    },
    hiddenHistoryModel(flag) {
      this.showHistory = flag;
    },
    showDetail_history(index) {
      this.showHistory = true;
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
#surver {
  width: 100%;
  height: 100%;
  position: relative;
  #gis {
    width: 100%;
    height: 100%;
  }

  .model .content .DetonatingRisk {
    width: 100%;
    max-height: 500px;
    overflow-y: auto;
    .tabs {
      margin-bottom: 10px;
      span {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 12px;
        color: #333;
        cursor: pointer;
        margin-right: 10px;
        &.selected {
          background: blue;
          color: #fff;
        }
      }
    }
    .table {
      width: 100%;
      .mainTitle {
        font-size: 16px;
        color: #333;
        font-weight: 600;
        text-align: center;
        margin-bottom: 5px;
      }
      .subTitle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
      }
      & > .content {
        width: 100%;
        table {
          width: 100%;
          border: 1px solid #ccc;
          text-align: center;
          border-collapse: collapse;
          border-spacing: 0;
          font-size: 12px;
          color: #333;
          tr td {
            height: 30px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            &.cell-title {
              width: 80px;
              font-weight: 600;
            }
            &.v-title {
              font-weight: 600;
            }
            &.leftalign {
              text-align: left;
              padding-left: 10px;
            }
            &.noBorder {
              border: none;
              text-align: left;
              padding-left: 20px;
            }
          }
        }
      }
    }
    > .table {
      width: 100%;
      & > table {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 12px;
        color: #333;
        border: 1px solid #ccc;
        tr td {
          height: 30px;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          &.h-img {
            height: 100px;
            line-height: 100px;
          }
          &.weight {
            font-weight: 600;
          }
        }
      }
    }
  }
  .model .content .simulate {
    width: 100%;
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    table {
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
      color: #333;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      tr td {
        height: 30px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        &.weight {
          font-weight: 600;
        }
        &.sm {
          width: 60px;
        }
      }
    }
  }
  .model .content .showHistory {
    width: 100%;
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    table {
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
      color: #333;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      tr td {
        height: 30px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        &.v-img {
          height: 100px;
        }
        &.weight {
          width: 100px;
          font-weight: 600;
        }
        &.minWidth {
          min-width: 100px;
        }
      }
    }
  }
  .gistools {
    width: 350px;
    height: 30px;
    padding: 0 20px;
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    .el-dropdown {
      cursor: pointer;
    }
  }
  .aside-table {
    position: absolute;
    right: 20px;
    top: 70px;
    height: calc(100% - 70px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    .toggleBar {
      width: 20px;
      height: 40px;
      position: absolute;
      left: -20px;
      top: 50%;
      border: 1px solid #ccc;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    .inner_ {
      position: relative;
      width: 500px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .row:first-child {
        width: 100px;
        height: 100%;
        font-size: 14px;
        color: #333;
        .top-tabItem {
          width: 100%;
          height: 30px;
          line-height: 30px;
          background: #ccc;
          text-align: center;
        }
        .tabs {
          width: 100%;
          height: calc(100% - 30px);
          overflow-y: auto;
          text-align: center;
          .tab-item {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            &.active {
              background: blue;
              color: #fff;
            }
          }
        }
      }
      .row:last-child {
        width: calc(100% - 100px);
        padding-top: 0;
        border-left: 1px solid #ccc;
        & > .select-item {
          width: 100%;
          height: 50px;
          line-height: 30px;
          padding: 10px;
          font-size: 14px;
          color: #333;
          display: flex;
          justify-content: space-between;
          span {
            display: inline-block;
            width: 80px;
          }
          .el-select {
            width: calc(100% - 80px);
          }
        }
        .inner {
          width: 100%;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          // margin-bottom: 10px;
          .col:first-child {
            width: calc(100% - 60px);
            .select-item {
              width: 100%;
              height: 40px;
              font-size: 14px;
              color: #333;
              line-height: 30px;
              padding-bottom: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              &:last-child {
                height: 30px;
                padding-bottom: 0;
              }
              span {
                display: inline-block;
                width: 80px;
              }
              .el-select {
                width: calc(100% - 80px);
                height: 30px;
                line-height: 30px;
              }
            }
          }
          .col:last-child {
            width: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .timer-select {
          height: 30px;
          margin-bottom: 10px;
          padding: 0 10px;
        }
        .content {
          width: 100%;
          height: calc(100% - 230px);
          &.more {
            height: calc(100% - 190px);
          }
          .h_tabs {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: #ccc;
            display: flex;
            justify-content: flex-start;
            text-align: center;
            color: #333;
            font-size: 14px;
            .tab-item {
              width: 100px;
              cursor: pointer;
              &.active {
                background: blue;
                color: #fff;
              }
            }
          }
          .warning {
            width: 100%;
            height: calc(100% - 30px);
            &.more {
              height: calc(100%);
            }
            color: #333;
            font-size: 12px;
            .head {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 25px;
              line-height: 25px;
              text-align: center;
              border-bottom: 1px solid #ccc;
              font-weight: 600;
              &.more {
                border-top: 1px solid #ccc;
              }
              .head-item {
                flex: 1;
                text-align: center;
                border-right: 1px solid #ccc;
                &.bg {
                  flex: none;
                  width: 80px !important;
                }
                &.bgger {
                  width: 140px !important;
                }
                &.bggerr {
                  width: 200px !important;
                }
                &:last-child {
                  border-right: none;
                }
              }
            }
            .inner-list {
              width: 100%;
              height: calc(100% - 25px);
              .list-item {
                width: 100%;
                display: flex;
                justify-content: space-between;
                height: 40px;
                text-align: center;
                border-bottom: 1px solid #ccc;
                .item {
                  flex: 1;
                  height: 40px;
                  line-height: 16px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  border-right: 1px solid #ccc;
                  span {
                    display: inline-block;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  &.bg {
                    flex: none;
                    width: 80px !important;
                  }
                  &.bgger {
                    width: 140px !important;
                  }
                  &.bggerr {
                    width: 200px !important;
                  }
                  &.warn {
                    color: red;
                  }
                  &:last-child {
                    border-right: none;
                    font-size: 12px;
                  }
                  span.detail {
                    display: inline-block;
                    padding: 2px 5px;
                    // border: 1px solid blue;
                    cursor: pointer;
                    // border-radius: 4px;
                    color: blue;
                  }
                }
              }
            }
          }
          .flowMonitor {
            width: 100%;
            height: calc(100% - 200px);
            overflow-y: auto;
          }
        }
        .pagenation {
          width: 100%;
          padding: 10px;
        }
      }
    }
  }
}
</style>


